<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.8.0/jquery.min.js"></script>
    <th:block th:include="include :: header('【请填写功能名称】列表')" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        span{
            margin-bottom: 20px;
        }
        html {
            font-family: sans-serif;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        body {
            margin: 10px;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        td,th {
            padding: 0;
        }

        .pure-table {
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #cbcbcb;
            width: 500px;
        }

        .pure-table caption {
            color: #000;
            font: italic 85%/1 arial,sans-serif;
            padding: 1em 0;
            text-align: center;
        }

        .pure-table td,.pure-table th {
            border-left: 1px solid #cbcbcb;
            border-width: 0 0 0 1px;
            font-size: inherit;
            margin: 0;
            overflow: visible;
            padding: .5em 1em;
        }

        .pure-table thead {
            background-color: #efefef;
            color: #000;
            text-align: left;
            vertical-align: bottom;
        }

        .pure-table td {
            background-color: transparent;
        }

    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">
<div class="row">
    <div class="col-sm-12">
        <div class="tabs-container">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 实时状况</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">监测点所在位置</a>
                </li>
                <li class="" id="ent"><a data-toggle="tab" href="#tab-3" aria-expanded="false">所属片区信息</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-4" aria-expanded="false">监测点信息</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-6" aria-expanded="false">日报表</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-7" aria-expanded="false">月报表</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-9" aria-expanded="false">日趋势展示</a>
                </li>
                <li class="" id="defend1"><a data-toggle="tab" href="#tab-10" aria-expanded="false">月趋势展示</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-11" aria-expanded="false">异常处理记录</a>
                </li>
                <li id="defend" class=""><a data-toggle="tab" href="#tab-12" aria-expanded="false">日常维护记录</a>
                </li>
            </ul>
            <div class="tab-content"  th:with="busData=${busData}">
                <div id="tab-1" class="tab-pane active" >
                    <div class="panel-body"  >
                       <h3>
                        <ul style="list-style-type:none;border:1px solid #ccc"  >
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right; background-color: #dddddd"><b>监测时间：</b></div>
                                <span th:text="${busData.produceTime}"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>氨氮：</b></div>
                                <span th:text="${busData.ad}"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>总磷：</b></div>
                                <span th:text="${busData.zl}"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>浊度：</b></div>
                                <span th:text="${busData.zd}"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>叶绿素：</b></div>
                                <span th:text="${busData.yls}"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>温度：</b></div>
                                <span th:text="${busData.wd}"></span>
                            </li>
                        </ul>
                       </h3>
                    </div>
                </div>
                <div id="tab-2" class="tab-pane">
                    <div class="panel-body">
                        <p>监测点所在位置</p>
                    </div>
                </div>
                <div id="tab-3" class="tab-pane">
                    <div class="panel-body">
                        <ul style="list-style-type:none;border:1px solid #ccc"  >
                            <li style="display:flex" >
                                <div style="margin-right:10px; width:100px; text-align:right; background-color: #dddddd"><b>企业ID：</b></div>
                                <span id="id"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>企业名称：</b></div>
                                <span id="name"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>企业地址：</b></div>
                                <span  id="address"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>联系人：</b></div>
                                <span  id="person"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>联系电话：</b></div>
                                <span  id="phone"></span>
                            </li>
                        </ul>
                        <script  type="text/javascript" th:inline="javascript">
                            var prefix2 = "/bus/data/ent";
                            $(function(){
                                query();
                                $("#ent").click(function(){
                                    query();
                                });
                            });
                            function query(){
                                $.ajax({
                                    url : prefix2+ "/"+[[${busData.monitorId}]],
                                    type: "get",
                                    error : function() {
                                        alert("系统出错")
                                    },
                                    success : function(data) {
                                        document.getElementById("id").innerHTML=data[0].entId;
                                        document.getElementById("name").innerHTML=data[0].entName;
                                        document.getElementById("address").innerHTML=data[0].entAddress;
                                        document.getElementById("person").innerHTML=data[0].contactPerson;
                                        document.getElementById("phone").innerHTML=data[0].contactPhone;
                                    }
                                });
                            }
                        </script>
                    </div>
                </div>
                <div id="tab-4" class="tab-pane">
                    <div class="panel-body">
                        <ul style="list-style-type:none;border:1px solid #ccc"  >
                            <li style="display:flex" >
                                <div style="margin-right:10px; width:100px; text-align:right; background-color: #dddddd"><b>监测点名称：</b></div>
                                <span id="monitorName"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>监测点MN编号：</b></div>
                                <span id="maintainName"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>维护单位：</b></div>
                                <span id="entName"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>所属企业：</b></div>
                                <span id="mnCode"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>河道名称：</b></div>
                                <span  id="riverName"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>所在街道：</b></div>
                                <span  id="street"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>所在片区：</b></div>
                                <span  id="area"></span>
                            </li>
                            <li style="display:flex">
                                <div style="margin-right:10px; width:100px; text-align:right;background-color: #dddddd"><b>监测点坐标：</b></div>
                                <span  id="lngLat"></span>
                            </li>
                        </ul>
                        <script  type="text/javascript" th:inline="javascript">
                            var prefix4 = "/bus/monitor/detail";
                            $(function(){
                                query();
                                $("#ent").click(function(){
                                    query();
                                });
                            });
                            function query(){
                                $.ajax({
                                    url : prefix4+ "/"+[[${busData.monitorId}]],
                                    type: "get",
                                    error : function() {
                                        alert("系统出错")
                                    },
                                    success : function(data) {
                                        document.getElementById("monitorName").innerHTML=data[0].monitorName;
                                        document.getElementById("maintainName").innerHTML=data[0].busMaintain.maintainName;
                                        document.getElementById("entName").innerHTML=data[0].busEnterprise.entName;
                                        document.getElementById("mnCode").innerHTML=data[0].mnCode;
                                        document.getElementById("riverName").innerHTML=data[0].riverName;
                                        document.getElementById("street").innerHTML=data[0].street;
                                        document.getElementById("area").innerHTML=data[0].area;
                                        document.getElementById("lngLat").innerHTML=data[0].lngLat;
                                    }
                                });
                            }
                        </script>
                    </div>
                </div>
                <div id="tab-6" class="tab-pane">
                    <div class="panel-body">
                        <div class="container-div">
                            <div class="col-sm-12 ">
                                <table id="bootstrap-tableDay"></table>
                            </div>
                        </div>

                        <th:block th:include="include :: footer" />
                        <script th:inline="javascript">
                            var prefix3 = ctx + "bus/data/day";
                            $(function() {
                                var options = {
                                    /*showSearch: false,
                                    showRefresh: false,
                                    showToggle: false,
                                    showColumns: false,*/
                                    async: false,
                                    url: prefix3 +"/" +[[${busData.monitorId}]]+"/"+[[${busData.produceTime}]],
                                    modalName: "【请填写功能名称】",
                                    columns: [
                                        {
                                            field: 'produceTime',
                                            title: '产生时间'
                                        },
                                        {
                                            field: 'ad',
                                            title: '氨氮(mg/L)'
                                        },
                                        {
                                            field: 'zl',
                                            title: '总磷(mg/L)'
                                        },
                                        {
                                            field: 'zd',
                                            title: '浊度(NTU)'
                                        },
                                        {
                                            field: 'wd',
                                            title: '温度(℃)'
                                        },
                                        {
                                            field: 'yls',
                                            title: '叶绿素(SPAD)'
                                        }]
                                };
                                $.table.initDay(options);
                            });
                        </script>
                    </div>
                </div>
                <div id="tab-7" class="tab-pane">
                    <div class="panel-body">
                        <p>月报表</p>
                    </div>
                </div>
                <div id="tab-9" class="tab-pane">
                    <div class="panel-body">
                        <p>日趋势展示</p>
                    </div>
                </div>
                <div id="tab-10" class="tab-pane">
                    <div class="panel-body">
                        <p>月趋势展示</p>
                    </div>
                </div>
                <div id="tab-11" class="tab-pane">
                    <div class="panel-body">
                        <div class="container-div">
                                <div class="col-sm-12 ">
                                    <table id="bootstrap-table"></table>
                                </div>
                        </div>

                        <th:block th:include="include :: footer" />
                        <script th:inline="javascript">
                            var prefix = ctx + "bus/exception";
                            $(function() {
                                var options = {
                                    /*showSearch: false,
                                    showRefresh: false,
                                    showToggle: false,
                                    showColumns: false,*/
                                    async: false,
                                    url: prefix + "/list/"+[[${busData.monitorId}]],
                                    modalName: "【请填写功能名称】",
                                    columns: [
                                        {
                                            field: 'id',
                                            title: '异常id',
                                            visible: false
                                        },
                                        {
                                            field: 'monitorId',
                                            title: '监测点id',
                                            visible: false
                                        },
                                        {
                                            field: 'mnCode',
                                            title: '监测点编号'
                                        },
                                        {
                                            field: 'monitorName',
                                            title: '监测点名称'
                                        },
                                        {
                                            field: 'operatedBy',
                                            title: '操作人员'
                                        },
                                        {
                                            field: 'operateTime',
                                            title: '操作时间'
                                        },
                                        {
                                            field: 'operateRemark',
                                            title: '操作备注'
                                        }]
                                };
                                $.table.init(options);
                            });
                        </script>
                    </div>
                </div>
                <div id="tab-12" class="tab-pane">
                    <div class="panel-body" >
                        <div class="container-div">
                            <div class="col-sm-12 ">
                                <table id="bootstrap-tableFix"></table>
                            </div>
                        </div>

                        <th:block th:include="include :: footer" />
                        <script th:inline="javascript">
                            var prefix1 = ctx + "bus/fix";
                            $(function() {
                                var options = {
                                    /*showSearch: false,
                                    showRefresh: false,
                                    showToggle: false,
                                    showColumns: false,*/
                                    async: false,
                                    url: prefix1 + "/list/"+[[${busData.monitorId}]],
                                    modalName: "【请填写功能名称】",
                                    columns: [
                                        {
                                            field: 'monitorName',
                                            title: '监测点名称'
                                        },
                                        {
                                            field: 'operatedBy',
                                            title: '操作人员'
                                        },
                                        {
                                            field: 'operateTime',
                                            title: '操作时间'
                                        },
                                        {
                                            field: 'operateRemark',
                                            title: '操作备注'
                                        }]
                                };
                                $.table.initFix(options);
                            });
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>